<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { userApi } from "@/api/index";
import { handleApiError } from "@/utils/tools";

// 响应式数据
const loading = ref(false);
const userData = ref(null);
const error = ref(null);

// 存储请求控制器，用于在组件销毁时取消请求
let abortController = null;

// 获取用户信息的方法，包含完整的错误处理
const fetchUserInfo = async () => {
  // 如果有正在进行的请求，取消它
  if (abortController) {
    abortController.abort();
  }

  // 创建新的 AbortController
  abortController = new AbortController();

  // 重置状态
  loading.value = true;
  error.value = null;

  try {
    // 获取用户信息，传入 signal 以支持取消
    // 注意：这里需要在 http.js 中支持 signal 参数
    const data = await userApi.getUserInfoApi({
      signal: abortController.signal,
    });
    userData.value = data;
  } catch (err) {
    // 使用错误处理工具函数
    const result = handleApiError(err, {
      // 如果是取消的请求，不显示错误提示
      showToast: !err?.isCancel,
      // 不忽略取消的请求，我们需要处理它
      ignoreCancel: false,
    });

    // 如果请求被取消，不更新错误状态
    if (!result.canceled) {
      error.value = result.message;
    } else {
      console.log("请求已被取消，不更新UI");
    }
  } finally {
    // 请求结束，无论成功还是失败都关闭加载状态
    // 但如果是取消的请求，我们可能不想更新UI状态
    if (!error.value?.canceled) {
      loading.value = false;
    }
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchUserInfo();
});

// 组件卸载时取消所有未完成的请求
onUnmounted(() => {
  // 如果有控制器，取消请求
  if (abortController) {
    abortController.abort();
  }
});

// 手动刷新数据
const refreshData = () => {
  fetchUserInfo();
};
</script>

<template>
  <view class="error-handling-example">
    <up-loading-icon v-if="loading" size="28" mode="circle"></up-loading-icon>

    <view v-else-if="error" class="error-container">
      <up-icon name="error-circle" color="#f56c6c" size="40"></up-icon>
      <text class="error-text">{{ error }}</text>
      <up-button type="primary" size="mini" @click="refreshData"
        >重试</up-button
      >
    </view>

    <view v-else-if="userData" class="data-container">
      <text class="title">用户信息</text>
      <view class="info-item">
        <text class="label">用户名:</text>
        <text class="value">{{ userData.username }}</text>
      </view>
      <!-- 其他用户信息字段 -->
    </view>

    <view v-else class="empty-container">
      <text>暂无数据</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.error-handling-example {
  padding: 20rpx;
  min-height: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;

    .error-text {
      color: #f56c6c;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }
  }

  .data-container {
    width: 100%;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .info-item {
      display: flex;
      margin-bottom: 16rpx;

      .label {
        width: 160rpx;
        color: #666;
        font-size: 28rpx;
      }

      .value {
        flex: 1;
        font-size: 28rpx;
      }
    }
  }

  .empty-container {
    color: #999;
    font-size: 28rpx;
  }
}
</style>
